<template>
  <div class="inner-container">
    <el-form ref="formRef" label-width="100px" label-position="left">
      <div class="section-title">转单
        <el-button  style="float: right;position: relative;bottom: 12px" type="primary" @click="queryCust">点此查看此订单对应的客户信息</el-button>
      </div>
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="24">
          <span style="color: #606266;font-size: 14px">一阶段 施工图纸</span>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="6">
          <span style="color: #606266;font-size: 14px">图纸审核时间</span>
        </el-col>
        <el-col :span="18">
          <span style="color: #606266;font-size: 14px">{{orderDetails.updateTime}}</span>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="6">
          <span style="color: #606266;font-size: 14px">审核人</span>
        </el-col>
        <el-col :span="18">
          <span style="color: #606266;font-size: 14px">{{orderDetails.updateUser}}</span>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="2">
          <span style="color: #606266;font-size: 14px">图纸类型</span>
        </el-col>
        <el-col :span="20">
          <span style="color: #606266;font-size: 14px">原始电位图</span>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 30px">
        <el-col>
          <el-upload
              class="upload-demo"
              v-model:file-list="fileListEle"
              name="file"
              :limit="4"
              list-type="picture-card"
              :on-preview="handlePictureCardPreviewF"
              :on-remove="handleRemoveF"
          >
<!--            <el-icon>-->
<!--              <img src="../../../../public/order/st1.png"/>-->
<!--            </el-icon>-->
            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span
                      class="el-upload-list-item"
                      v-if="file.qualified==1"
                      style="color: #009966;font-size: 12px;"
                  >
                    <span class="text">合格</span>
                  </span>
                  <span
                      class="el-upload-list-item"
                      v-if="file.qualified==0"
                      style="color: #FF0000;font-size: 12px;"
                  >
                    <span>不合格</span>
                  </span>
                  <span
                      class="el-upload-list-item"
                  >
                    <span>{{file.unqualified}}</span>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
          <el-dialog v-model="dialogVisibleF">
            <img w-full :src="dialogImageUrlF" />
          </el-dialog>
          <span style="color: #009966;font-size: 12px;margin-right: 250px;" v-for="i in quaList" v-if="i == '合格'">{{i}}</span>
          <span style="color: #FF0000;font-size: 12px;margin-right: 250px;" v-else>{{i}}</span>
          <span v-for="i in unqualified">{{i}}</span>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="2">
          <span style="color: #606266;font-size: 14px">图纸类型</span>
        </el-col>
        <el-col :span="20">
          <span style="color: #606266;font-size: 14px">原始水位图</span>
        </el-col>
      </el-row>
      <el-row style="position: relative;margin-bottom: 30px">
          <el-upload
              class="upload-demo"
              v-model:file-list="fileListWater"
              name="file"
              :limit="4"
              list-type="picture-card"
              :on-preview="handlePictureCardPreviewF"
              :on-remove="handleRemoveF"
          >
            <!--            <el-icon>-->
            <!--              <img src="../../../../public/order/st1.png"/>-->
            <!--            </el-icon>-->
            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span
                      class="el-upload-list-item"
                      v-if="file.qualified==1"
                      style="color: #009966;font-size: 12px;"
                  >
                    <span class="text">合格</span>
                  </span>
                  <span
                      class="el-upload-list-item"
                      v-if="file.qualified==0"
                      style="color: #FF0000;font-size: 12px;"
                  >
                    <span class="text">不合格</span>
                  </span>
                  <span
                      class="el-upload-list-item"
                  >
                    <span>{{file.unqualified}}</span>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
          <el-dialog v-model="dialogVisibleF">
            <img w-full :src="dialogImageUrlF" />
          </el-dialog>
          <el-button type="primary" @click="submitDrawing" style="position: absolute;right: 0px;bottom: 0px;">重新上传</el-button>
      </el-row>
<!--      <el-row :gutter="30">-->
<!--        <el-col :span="21"> </el-col>-->
<!--        <el-col :span="3">-->
<!--          <el-button type="primary" @click="submitDrawing">提交图纸至工程部审核</el-button>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="24">
          <span style="color: #606266;font-size: 14px">二阶段 图纸报价审核</span>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="6">
          <span style="color: #606266;font-size: 14px">审核开始时间</span>
        </el-col>
        <el-col :span="18">
          <span style="color: #606266;font-size: 14px">{{orderDetails.createTime}}</span>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="6">
          <span style="color: #606266;font-size: 14px">审核结束时间</span>
        </el-col>
        <el-col :span="18">
          <span style="color: #606266;font-size: 14px">{{orderDetails.updateTime}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col></el-col>
        <el-col></el-col>
      </el-row>
      <el-row></el-row>
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="24">
          <span style="color: #606266;font-size: 14px">三阶段 方案预演</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="主讲人">
            <span style="color: #606266;font-size: 14px">{{orderDetails.compere}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="参与预演人员">
            <span style="color: #606266;font-size: 14px">{{orderDetails.participate}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 30px">
        <el-col :span="12">
          <el-form-item label="预演记录">
            <span style="color: #606266;font-size: 14px">{{orderDetails.logs}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="3">
          <span style="color: #606266;font-size: 14px">四阶段 设计师谈单</span>
        </el-col>
        <el-col :span="5" style="position: relative;right: 60px;bottom: 2px">
          <el-select v-model="orderStatus" placeholder="选择转单状态" @change="changeOrderStatus">
            <el-option :value="80" label="转单完成(财务待确认工程订单)"></el-option>
            <el-option :value="60" label="退单(处理中)"></el-option>
            <el-option :value="70" label="死单(处理中)"></el-option>
          </el-select>
        </el-col>
        <el-col :span="16"> </el-col>
      </el-row>
      <el-row v-if="succeed">
        <span>转单完成后,由财务部门在财务管理模块中填写合同签约信息,确认工程订单</span>
      </el-row>
      <el-row v-if="refund">
        <el-col :span="16">
          <el-form-item label="退款原因">
            <el-input ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="退款金额">
            <el-input ></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="上传附件">
            <el-col>
              <el-upload
                  class="upload-demo"
                  v-model:file-list="fileListF"
                  v-model:action="actionUrl"
                  name="file"
                  :limit="4"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreviewF"
                  :on-remove="handleRemoveF"
                  :disabled="true"
              >
              </el-upload>
              <el-dialog v-model="dialogVisibleF">
                <img  :src="dialogImageUrlF" />
              </el-dialog>
            </el-col>
          </el-form-item>
        </el-col>
        <el-button type="primary" @click="submitOrder" style="position: relative;left: 1430px">提交</el-button>
        <el-button @click="reOrder"  style="position: relative;left: 1430px">重置</el-button>
      </el-row>
      <el-row v-if="end">
        <el-form-item label="死单原因">
          <el-input type="textarea" style="width: 800px;" :rows="12" resize="none"/>
          <el-button type="primary" @click="submitOrder" style="position: relative;left: 60px;top: 120px;">提交</el-button>
          <el-button @click="reOrder" style="position: relative;left: 60px;top: 120px">重置</el-button>
        </el-form-item>
      </el-row>
      <el-row :gutter="30" style="margin-bottom: 30px">
        <el-col :span="3">
          <span style="color: #606266;font-size: 14px">五阶段 转单结果</span>
        </el-col>
        <el-col :span="5" style="position: relative;right: 60px;bottom: 2px">
          <el-select v-model="endStatus" placeholder="选择转单状态">
            <el-option :value="10" label="转单完成(财务已确认工程订单)"></el-option>
            <el-option :value="20" label="退单(处理完成)"></el-option>
            <el-option :value="30" label="死单(处理完成)"></el-option>
          </el-select>
        </el-col>
        <el-col :span="16"> </el-col>
      </el-row>
    </el-form>
    <div></div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {useRoute, useRouter} from "vue-router";
import result from "@/utils/request"
import request from "@/utils/request";

const route = useRoute()
const router = useRouter()

//----
const userId = ref();



//
const orderId = new URLSearchParams(window.location.search).get('id');
const unqualified = ref([]);
const quaList = ref([]);
const endStatus = ref();
//----
const queryCust = () => {
  result.get("/api/crm/orders/getUserId?id="+orderId).then((res) => {
    userId.value = res.data;
    console.log(res.data);
    router.push({path: '/crm/customer/info', query: {id: userId.value }})
  });
}



//图片显示
const fileListEle = ref([]);
const fileListWater = ref([]);
const myMap = ref(new Map());
const imgLoad = () => {
  result.post(BASE_URL + PNG_PATH + '/get/img/'+orderId).then((res) => {
    myMap.value = new Map(Object.entries(res.data));
    for (let i = 0; i < myMap.value.get("电位图").length; i++){
      fileListEle.value.push({
        name: myMap.value.get("电位图")[i].type+i,
        url: BASE_URL+myMap.value.get("电位图")[i].imgUrl,
        qualified: myMap.value.get("电位图")[i].qualified,
        unqualified: myMap.value.get("电位图")[i].unqualified
      })
    }
    for (let i = 0; i < myMap.value.get("水位图").length; i++) {
      fileListWater.value.push({
        name: myMap.value.get("水位图")[i].type + i,
        url: BASE_URL + myMap.value.get("水位图")[i].imgUrl,
        qualified: myMap.value.get("水位图")[i].qualified,
        unqualified: myMap.value.get("水位图")[i].unqualified
      })
    }
    // for (let i = 0; i <res.data.list[0].length; i++) {
    //   fileListEle.value.push({
    //     name: res.data.list[0].array[i].type+1,
    //     url: BASE_URL+res.data.list[0].array[i].imgUrl
    //   });
    // }
  })
}


const submitDrawing = () => {
  const obj = Object.fromEntries(myMap.value);
  ElMessageBox.confirm('确定删除该订单所有图纸并重新上传吗？', '提示', {
    type: 'warning'
  }).then((res) => {
    result.post('api/crm/img/imgDel', obj).then((res) => {
      ElMessage.success('已删除所有图纸');
      router.push({path: '/crm/detail', query: {id: orderId}})
    })
  }).catch(() => {
  })
}


const orderDetails = ref({
  updateTime: '',
  updateUser: '',
  createTime: '',
  compere: '',
  participate: '',
  logs: '',
});
const detailsQuery = () => {
  result.get("/api/crm/orders/details/",{
    params: {
      id: orderId
    }
  }).then((res) => {
    orderDetails.value = res.data;
    orderStatus.value = res.data.transferProgress;
    endStatus.value = res.data.designerProgress;
    console.log(orderDetails.value);
  })
}




onMounted(() => {
  imgLoad();
  detailsQuery();
})

// --------------------------------------------------
const orderStatus = ref();
const succeed = ref(false);
const refund = ref(false);
const end = ref(false);
const changeOrderStatus = () => {
  if (orderStatus.value == '10') {
    succeed.value = true;
    refund.value = false;
    end.value = false;
  } else if (orderStatus.value == '20') {
    refund.value = true;
    succeed.value = false;
    end.value = false;
  } else if (orderStatus.value == '30') {
    refund.value = false;
    succeed.value = false;
    end.value = true;
  }
}

const submitOrder = () => {
  ElMessage.success('提交成功');
}

const reOrder = () => {
  ElMessage.success('成功');
}





const actionUrl = ref(BASE_URL + PNG_PATH + '/upload');
const fileListF = ref([{
  name: 'asd',
  url: 'http://localhost:8080/2025/03/08/03cde4a5-e672-4157-8eff-4978cfded761.png'
}]);

const dialogImageUrlF = ref('');
const dialogVisibleF = ref(false);

const handleRemoveF = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  result.post(BASE_URL + PNG_PATH + '/remove', uploadFile.response.data)
      .then(
          (res) => {
            ElMessage.success('删除成功');
          }
      )
}

const handlePictureCardPreviewF = (uploadFile) => {
  dialogImageUrlF.value = uploadFile.url
  dialogVisible.value = true
  console.log(uploadFile);
  console.log(fileList.value);
}
//--------------------------------------------------------


</script>

<style scoped>
.section-title {
  position: relative;
  padding-left: 10px;
  margin-bottom: 35px;
  line-height: 1rem;
  border-left: 3px solid #409EFF;
}

.section-title::after {
  content: '';
  position: absolute;
  left: -3px;
  bottom: -10px;
  width: 100%;
  height: 1px;
  background-color: #dcdfe6;
}

.qua {
  position: absolute;
  bottom: -16px;
  left: 7px;
}


.upload-demo >>> .el-upload {
  display: none;
}
.upload-demo >>> .el-upload-list__item {
  width: 261px;
  height: 157px;
  overflow: visible !important;
}
.el-upload-list-item {
  display: block !important; /* 强制显示 */
  position: absolute;
  bottom: -20px;
  left: 2px;
}
.el-upload-list__item-actions >>> .el-upload-list-item {
  display: block !important;
}
.text {
  display: block !important;
}



.el-upload-list--picture-card .el-upload-list__item-actions {
  opacity: 1 !important;
  background-color: transparent;
}
.el-upload-list--picture-card .el-upload-list__item {
  overflow: visible !important;
}
</style>
